8.2 TRUjQ - A Simple jQuery-like Library

$(document).ready(function() {  // ready(): event method
    $('p').click(function() {  // click(): event method
        $(this).css('background-color', 'Red');  // css(): action method
    });
});
$.get(url, function(data) { $('#message-pane').html(data); });  // get(): AJAX method; html(): action method

• document
• string for CSS selectors
• this as a HTMLElement object
• a HTMLElement object

• Function; Functions are objects.

• Not HTMLElement object
• jQuery object that has event methods and action methods

• A method, .get()

• document
• string for CSS selectors - HTML element type, id, class, no other complex selectors (not difficult to implement though)
• this as a DOM object, i.e., HTMLElement object
• HTMLElement object

• Three different TRUjQ objects
  • TRUjQ_document - from TRUjQ(document)
  • TRUjQ_htmlselector - from TRUjQ('...')
  • TRUjQ_htmlelement - from TRUjQ(this) or TRUjQ(HTMLElement)

• ready() for document (actually the 'load' event on window)
• click()
• dblclick()

• html()
• attr()
• css()
• hide(), show(), toggle()

• get()
• post()

• version - E.g., TRUjQ.version

• How to make a function receive three different types of argument?
  • typeof argument == 'string'
  • argument instanceof HTMLElement
  • argument == document
  • How to combine the above three different types?

    function TRUjQ(x) {
        if (x == document) {
            ...
            return ...;
        } else if (typeof x == 'string') {
            ...
            return ...;
        } else if (x instanceof HTMLElement) { 
            ...
            return ...;
        } else  // unknown case
            return null;
    }
    

• How to make something work as a function and an object? E.g., TRUjQ.version.
  • Difficult? Here is an example.

    function TRUjQ(x) {
        if (x == document) { ... }
        else if (typeof x == 'string') { ... }
        else if (x instanceof HTMLElement) { ... }
        else { ... }
    }
    TRUjQ.version = '0.0.1';
    

• Trial 1: Let's try the above example, with the following.
  <div id='tr1-div'>Very interesting topics!</div> <script> function TRUjQ(x) { if (????) alert('document'); ???? alert('string'); ???? alert('HTMLElement'); else alert('something else'); } ???? = '0.0.1'; //----------------------------- TRUjQ(document); TRUjQ('div'); TRUjQ(????('tr1-div')); // the HTMLElement object for the div of id='tr1-div' TRUjQ(????('#tr1-div')); // the jQuery object for the div of id='tr1-div' alert(TRUjQ.version); </script> Submit

  
  
  

• How to register an event listener?
• How to select an HTML element with id?
• How to select HTML elements with a class name?
  document.getElementsByClassName()
• How to select HTML elements with a tag name?
  document.getElementsByTagName()
• How to select HTML elements with a CSS selector?
  document.querySelectorAll()
• Trial 1.5: Let's try the above selection cases, with the following. Note that this is the selected HTMLElement when event listeners are invoked.
  <p>You can only feel the beauty.</pp> <p>Be Persistent.</p> <p id='tr1-5-id'>What's your priority?</p> <p class='tr1-5-class'>Never blame other people for your problems.</p> <p class='tr1-5-class'>Do to other what you would have them to do for you.</p> <script> // register an event listener for click over an element of id='tr1-5-id' var obj = document.getElementById('tr1-5-id'); if (????) ????, function() { alert('id selection: ' + this.innerHTML); }); // register event listeners for click over all <p> elements var objs = ???? for (let i = 0; i < objs.???; i++) ????, function() { alert('element selection: ' + this.innerHTML); }); // register event listeners for click over all elements in class='tr1-5-class' ???? for (let i = 0; i < ???; i++) ???? { alert('class selection: ' + this.innerHTML); }); </script> Submit

  
  
  


• Trial 1.6: Let's try another example of callback function and this. The this in TRUjQ_test_id('#...').click(function() { ...this... }) is not the element of the given id. Why?
  <p id='tr1-6-id'>We're happy because we laugh.</p> <p class='tr1-6-class'>Learn to say 'Yes'.</p> <p class='tr1-6-class'>Busy your mind with positive thoughts.</p> <script> $('.tr1-6-class').click(function() { alert(this + ', ' + this.innerHTML); // this is the HTMLElement on which the click event is triggered. }); function TRUjQ_test_id(id) { alert("1. " + this + ', ' + this.innerHTML); // What is this? id = ???? // remove '#' from id return ??? // return an object ???: ???? { // for click(callback) alert("2. " + this + ', ' + this.innerHTML); // What is this? document.getElementById(id).addEventListener('click', function(eobj) { alert("3. " + this + ', ' + this.innerHTML); // What is this? ????; // invoke the callback function that is passed to click(), and pass eobj }); } ??? } TRUjQ_test_id('#tr1-6-id').click(function(eobj) { alert("4. " + this + ', ' + this.innerHTML); // *** What is this? alert("5. " + eobj.??? + ', ' + eobj.???.innerHTML); // What is it? }); </script> Submit

  
  
  
• How to make the this in TRUjQ_test_id('#...').click(function() { ...this... }) represent the element of the given id?


• Trial 1.7: Let's try to preserve this for callback functions.
  <p id='tr1-7-id'>Love makes our surrounding better.</p> <p class='tr1-7-class'>Each day is unique and beautiful.</p> <p class='tr1-7-class'>Busyness has nothing to do with productivity.</p> <script> $('.tr1-7-class').click(function() { alert(this + ', ' + this.innerHTML); // this is the HTMLElement on which the click event is triggered. }); function TRUjQ_test_id(id) { alert("1. " + this + ', ' + this.innerHTML); // What is this? window id = id.substring(1, id.length); return { click: function(callback) { alert("2. " + this + ', ' + this.innerHTML); // What is this? the object that is being returned document.getElementById(id).addEventListener('click', function(eobj) { alert("3. " + this + ', ' + this.innerHTML); // What is this? the object that is clicked this.__TRUjQ_callback = callback; // Need a trick to make callback belong to the current this. ???? // instead of the above trick, using Function.prototype.bind() // (callback.bind(this))(eobj); // or Function.prototype.call() // callback.call(this, eobj); // https://www.w3schools.com/js/js_function_call.asp }); } } } TRUjQ_test_id('#tr1-7-id').click(function() { alert("4. " + this + ', ' + this.innerHTML); // *** What is this? }); </script> Submit

  
  
  


• How to get CSS property values when they are not specified in the attribute 'style'?
  window.getComputedStyle(HTMLElement).property

• Three TRUjQ objects:
  • TRUjQ_document - from TRUjQ(document)
  • TRUjQ_htmlselector - from TRUjQ('...')
  • TRUjQ_htmlelement - from TRUjQ(this)
• Three events to support: load, click, dblclick
• Similar to $(document).ready(...), $('...').click(...) and $(this).dblclick(...)


• TRUjQ_document - How to make a TRUjQ object similar to the return value from jQuery $(document)?
  • Usage: TRUjQ(document).ready(function(){...});
  • What should TRUjQ(document) return?
    An object having a method, .ready(), that has an argument of a callback function that should be invoked when the document is completely loaded. This object also has some other methods to support events such as 'click' and 'dblclick'.
  • Here is an example.

    <script>
    //-- library -------------------------------
    
    function TRUjQ(x) {
        if ???? 
            return ??? _TRUjQ_document(???);  // x; this should NOT be passed; this is window.
    }
    
    function _TRUjQ_document(thispreserved) {  // Object constructor
        this.ready = function(callback) {
            if (document.readyState == 'complete') {
                // callback();  // Should not be called directly. If so, the value of this in callback becomes different.
                // Let's use the next interesting trick.
                thispreserved.__TRUjQ_callback = callback;
                ????
                // or instead of the above trick, callback.bind(thispreserved)()
                //   See https://www.w3schools.com/js/js_function_bind.asp
                // or
                // callback.call(thispreserved);  // https://www.w3schools.com/js/js_function_call.asp
            } else {
                ???.???(???, function() {;  // onload event on window; thispreserved should be used in the callback function.
                    ????
                });
            }
        }
        this.click = function(callback) {
            document.addEventListener('click', function(eobj) {
                //callback();  // It will not preserve 'this'. How to fix?
                ????
            });
        }
        // ????
    }
    </script>
    
    <script>
    //-- application ---------------------------
    
    TRUjQ(document).ready(function() {
        document.getElementById('tr2-div').innerHTML = 'Ready! Click me!<br>';
    });
    TRUjQ(document).click(function() {
        document.getElementById('tr2-div').innerHTML += (this == document ? 'this is document.' : 'this is not document.') + '<br>';
        document.getElementById('tr2-div').innerHTML += 'Clicked<br>';
    });
    </script>
    
    <div id='tr2-div'>Message here!</div>
    

  • Trial 2: Let's try the above example, with the following.
    Submit

    
    
    


• TRUjQ_htmlselector - How to make a TRUjQ object similar to the return value from $('...')?
  • Usage: TRUjQ('...').click(function(){...});, TRUjQ('...').dblclick(function(){...});
  • What should TRUjQ('...') return?
    An object having two methods,.click() and .dblclick(), that have an argument of a callback function that should be invoked when there is a 'click' or 'dblclick' event triggered on the target HTMLElement object. This object also has some action methods.
  • Here is an example. You may need to read VanillaJS for this example.

    <script>
    //-- library -------------------------------
    
    function TRUjQ(x) {
        if (x == document) {
            return new _TRUjQ_document(x);
        }
        else if ???? 
            return ??? _TRUjQ_htmlselector(x);
    }
    
    function _TRUjQ_document(thispreserved) {  // Object constructor
        this.ready = function(callback) {
            if (document.readyState == 'complete') {
                thispreserved.__TRUjQ_callback = callback;
                thispreserved.__TRUjQ_callback();
            } else 
                window.addEventListener('load', function() {  // onload event on window
                    (callback.bind(thispreserved))();  // or, instead of the trick in the above
                });
        }
        // ????
    }
    
    function _TRUjQ_htmlselector(selector) {
        selector = selector.trim();
        var elements = ????
        this.??? = function(callback) {
            ????  // Registration of event listener over selected elements; how?
                  // Need to be careful with callback and this. What should be bound to callbak?
        }
        // ????
    }
    </script>
    
    <script>
    //-- application ---------------------------
    
    TRUjQ(document).ready(function() {
        TRUjQ('p').click(function() {
            alert('Wow! Interesting! Tag selection, ' + this.innerHTML);
        });
        TRUjQ('#tr3-p').click(function() {
            alert('Wow! Interesting! Id selection, ' + this.innerHTML);
        });
        TRUjQ('.tr3-p').click(function() {
            alert('Wow! Interesting! Class selection, ' + this.innerHTML);
        });
    });
    </script>
    
    <p style='border:solid 1px Red'>You look great today.</p>
    <p id='tr3-p' style='border:solid 1px Blue'>You are a fantastic student.</p>
    <p class='tr3-p' style='border:solid 1px Green'>You have the best style.</p>
    

  • Trial 3: Let's try the above example, with the following.
    Submit

    
    
    


• TRUjQ_htmlelement - How to make a TRUjQ object similar to the return value from $(this)?
  • Usage: TRUjQ(this).css(); TRUjQ(this).hide(); ...
  • What should TRUjQ(this) return?
    An object having action methods. How?
  • Here is an example.

    <script>
    //-- library -------------------------------
    
    function TRUjQ(x) {
        if (typeof x == 'string')
            return new _TRUjQ_htmlselector(x);
        else if (????) 
            return new _TRUjQ_htmlelement(x);  // If HTMLElement object
    }
    
    function _TRUjQ_htmlselector(selector) {
        selector = selector.trim();
        var elements = document.querySelectorAll(selector);
        this.click = function(callback) {
            for (var i = 0; i < elements.length; i++) {
                elements[i].addEventListener('click', function(obj) { 
                    this.__TRUjQ_callback = callback;
                    this.__TRUjQ_callback(obj);
                });
            }
        }
        this.hide = ????
        // ????
    }
    
    function _TRUjQ_htmlelement(element) {  // element: HTMLElement object
        // ????
        this.css = function(property, value) {
            if (value == ???)  // when value is not defined,
                return ????;  // Using window.getComputedStyle()
            else 
                ????;  // Set property without using window.getComputedStyle()
        };
        // ????
    }
    </script>
    
    <script>
    //-- application ---------------------------
    
    TRUjQ('p').click(function() {
        TRUjQ(this).css('background-color', 'SkyBlue');
    });
    TRUjQ('#tr4-button').click(function() {
        TRUjQ('#tr4-p').hide();
    });
    </script>
    
    <p id='tr4-p' style='border:solid 1px Blue'>Click it to change the background color. You can do it!</p>
    <button id='tr4-button'>Hide it!</button>
    

  • Trial 4: Let's try the above example, with the following.
    Submit

    
    
    

• Usage: TRUjQ.get(url, callback);
• Here is an example.

  <script>
  //-- library -------------------------------
  
  TRUjQ = ???;  // Let's start it with an empty object for testing.
  TRUjQ.??? = function(????) {
      let xhttp = ??? ???();  // AJAX object
      xhttp.addEventListener('load', function() {
          ????
      });
      xhttp.???("GET", url);
      xhttp.???();
  }
  </script>
  
  <script>
  //-- application ---------------------------
  
  //- Let's use jQuery for testing, except TRUjQ.get(). -----------------
  $('#tr5-send').click(function() {
      let url = `echo.php?message=????`;  // message from <input>
      TRUjQ.get(????);  // the message sent from the server needs to be displayed in <div>
  });
  </script>
  
  <input id='tr5-message'><br>
  <button id='tr5-send'>Send the above message to the echo server!</button>
  <div id='tr5-result'>Echoed message here!</div>
  

• Trial 5: Let's try the above example, with the following.
  Submit

  
  
  
• Trial 6: Let's try to implement a different version of TRUjQ.get(). Here is an example how to use this version.

  const testTRUjQGet = async function(url) {
      let data = await TRUjQ.get(url);
      ...
  }
  testTRUjQGet("echo.php?message='I am happy to see your smile.'");
  

  Can you implement this version of TRUjq.get() so that the server-side can be accessed like a database?
  <script> //-- library ------------------------------- TRUjQ = {}; TRUjQ.get = function(url, cb) { if (cb == undefined) { ???? // <b>what should be returned?</b> } } </script> <script> //-- application --------------------------- { const readMessage = ??? function(url) { let data = ??? TRUjQ.get(url); alert(data) } readMessage("echo.php?message='I am happy to see your smile.'"); } </script> Submit

  
  
  

• Usage: TRUjQ.post(url, queryobject, callback);, or ... = await TRUjQ.post(url, queryobject);
• Usage: TRUjQ(selector).load(url);